<template>
  <!-- 弹框开始 -->
  <uni-popup
    ref="popup"
    type="bottom"
    :showPopup="true"
  >
    <view class="like">
      <view class="like-tittle">
        留言
        <i
          class="iconfont icon-searchclose"
          @click="close"
        />
      </view>
      <view class="like-desc">
        <textarea
          v-model="paramObj.description"
          maxlength="200"
          class="info-text"
          placeholder="建议留言前先与商家沟通确认,最多只支持200字"
        />
      </view>
      <!-- 底部操作栏 -->
      <view class="footer">
        <button
          class="add-cart-btn btn-class"
          @click="addToCart"
        >确定</button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      paramObj: {
        description: '',
      },
    }
  },
  computed: {
    ...mapGetters(['addrObj']),
  },
  mounted() {},
  methods: {
    open(val) {
      this.paramObj = val
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    addToCart() {
      this.$refs.popup.close()
      this.$emit('addText', this.paramObj)
    },
  },
  onReachBottom() {},
}
</script>

<style scoped lang="less">
// 置顶弹框
.like {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 0 40rpx 40rpx;
  box-sizing: border-box;

  .like-tittle {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 34rpx;
    color: #131313;
    justify-content: space-between;
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 40rpx;
    }
  }

  .like-desc {
    height: 400rpx;
    width: 100%;
    font-size: 25rpx;
    color: #5c5c5c;
    margin: 0 auto 40rpx;
    background: rgba(0, 0, 0, 0.1);
    padding: 20rpx;
    box-sizing: border-box;
    .info-text {
      font-size: 28rpx;
      border: none;
      height: 380rpx;
      width: 100%;
    }
  }

  .footer {
    width: 90%;
    margin: 20rpx 0 0 5%;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20rpx;

    .add-cart-btn {
      background: #ff5000;
      color: #fff;
      border-radius: 50rpx;
    }
  }
}
</style>